<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Demo To Learn JS</title>
    <style>
        h1 {
            text-align:center;
        }
        table {
            /* 合并边框 */
            border-collapse: collapse;
            /* 居中 */
            margin: auto; 
            text-align: center;
        }
        th, td {
            /* 边框宽度，颜色，边框类型 */
            border: 1px solid black;
            /* 内边距 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>订单确认</h1>
    <!-- table->tr(表格的行)->th(表头)
            |
            ->td(表格单元格) -->
    <script>
        let price = prompt("请输入商品价格：");
        let num = prompt("请输入商品数量：");
        let add = prompt("请输入收货地址：");
        let total = price * num;
        document.write(`
           <table>
        <tr>
            <th>商品名称</th>
            <th>商单价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>商品1</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${add}</td>
        </tr>
    </table>
        `);
    </script>
</body>

</html>